<template>
  <div class="arcgis map" id="ArcGisCore"></div>
</template>

<script>
import Map from "@arcgis/core/Map";
import MapView from "@arcgis/core/views/MapView";
// 引入图层
import GraphicsLayer from "@arcgis/core/layers/GraphicsLayer";
// 引入范围
import Extent from "@arcgis/core/geometry/Extent.js";
// 引入图形(可做标记)
import Graphic from "@arcgis/core/Graphic";
export default {
  name: "index",
  data() {
    return {
      map: null,
      mapView: null,
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      const extent = new Extent({
        xmin: 113.65,
        ymin: 30.23,
        xmax: 114.85,
        ymax: 31.89,
        spatialReference: { wkid: 4326 },
      });

      this.map = new Map({
        basemap: "streets-vector",
        // "satellite", "hybrid", "terrain", "oceans", "osm", "dark-gray-vector", "gray-vector", "streets-vector", "c", "streets-night-vector", "streets-relief-vector", "streets-navigation-vector"
        layers: [new GraphicsLayer()], // 添加图层
      });
      this.mapView = new MapView({
        container: "ArcGisCore",
        map: this.map,
        center: [102.92934063304513, 25.102234987110343],
        zoom: 3,
        extent: extent, // 设置范围
        background: "#000", // 设置背景颜色
      });

      this.addMarker();

      // 添加图层的其他方法
      // this.map.add(new GraphicsLayer());
      // this.map.layers.add(new GraphicsLayer());
      // this.map.layers.push(new GraphicsLayer());
      // this.map.layers.addMany([new GraphicsLayer(), new GraphicsLayer()]);
    },
    addMarker() {
      const pointGraphic = new Graphic({
        geometry: {
          type: "point",
          longitude: 114.296173,
          latitude: 30.592868,
        },
        symbol: {
          type: "simple-marker",
          style: "square",
          color: "blue",
          size: "8px",
          outline: {
            color: [255, 255, 0],
            width: 3,
          },
        },
      });
      this.mapView.graphics.add(pointGraphic);
    },
  },
};
</script>

<style lang="scss" scoped>
.map {
  width: 100%;
  height: 100%;
}
</style>
